<template>
  <view class="classes-item">
    <edu-collapse ref="collapse" :head-style="headStyle">
      <edu-collapse-item
        :title="item.title"
        v-for="(item, index) in menuList"
        :key="index"
        :index="item.course_id"
      >
        <template slot="title">
          <view class="classes-item__head">
            <view class="tag" :class="courseTypeClass[item.course_type]">{{
              item.course_type_text
            }}</view>
            <view
              class="title u-line-1"
              :class="{
                active: courseCurrentPlayCourseid === item.course_id,
              }"
              >{{ item.title }}</view
            >
          </view>
        </template>
        <Section
          :course-id="item.course_id"
          :query-id="courseId"
          :classId="courseId"
          :detailsInfo="detailsInfo"
          @success="sectionSuccess"
        ></Section>
      </edu-collapse-item>
    </edu-collapse>
    <edu-empty v-if="$u.test.empty(menuList)"></edu-empty>
  </view>
</template>

<script>
import Section from './section.vue'
import { mapGetters } from 'vuex'
export default {
  components: {
    Section,
  },
  props: {
    courseId: {
      type: Number,
      default: 0,
    },
    detailsInfo: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      menuList: [],
      courseTypeClass: {
        1: 'video',
        2: 'live',
        3: 'multipart',
        4: 'classes',
      },
    }
  },
  computed: {
    ...mapGetters({
      courseCurrentPlayCourseid: 'course/getCurrentPlayCourseid',
    }),
    headStyle() {
      return {
        padding: '40rpx 0',
        borderBottom: '1rpx solid #F7F7F7',
      }
    },
  },
  mounted() {
    this.getClassesData()
    uni.$on('sectionItemUpdate', (data) => {
      if (data.course_type == 4) {
        this.$u.throttle(() => {
          this.getClassesData()
        }, 1000)
      }
    })
  },
  methods: {
    getClassesData() {
      // this.menuList = []
      this.$edu.api.getCourseClassesMenu(this.courseId).then((res) => {
        const { data } = res
        this.menuList = data
      })
    },
    sectionSuccess() {
      this.$nextTick(() => {
        this.$refs.collapse.init()
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.classes-item {
  .classes-item__head {
    display: flex;
  }
  .title {
    max-width: 500rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
    &.active {
      @include text-color();
    }
  }
  .tag {
    margin-left: 22rpx;
    margin-right: 12rpx;
    width: 72rpx;
    height: 36rpx;
    border-radius: 12rpx;
    color: #ffffff;
    font-size: 24rpx;
    font-weight: 400;
    text-align: center;
    line-height: 36rpx;
    &.video {
      background-color: #ff7272;
    }
    &.live {
      background-color: #67c23a;
    }
  }
}
</style>
